<template>
  <div id="stuScoreCharts">
    <globle-linear-border>
      <select-header v-if="selectOptions" :data="selectOptions" @on-option-click="onOptionClick"></select-header>
    </globle-linear-border>

    <div class="main-box">
      <main>
        <section>
          <globle-linear-border class="left-top-box">
            <div id="scorePass"></div>
          </globle-linear-border>
          <globle-linear-border class="left-top-box">
            <div id="levelScale"></div>
          </globle-linear-border>
          <globle-linear-border class="left-top-box">
            <div id="scoreRadar"></div>
          </globle-linear-border>
        </section>
        <globle-linear-border class="left-bottom-box">
          <div id="perExamScore"></div>
        </globle-linear-border>
      </main>
      <aside>
        <globle-linear-border class="right-box">
          <per-exam-rank v-if="chartData" :data="chartData.perExamData" id="perExamRank"></per-exam-rank>
        </globle-linear-border>
      </aside>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus';
import { onBeforeUnmount, onMounted, ref } from 'vue';
import echarts from '../../../../echarts';
import { useAPI } from '../../../../request/api';
import { useUserStore } from '../../../../store/user';
import { initPerExamScore } from './chartsInit/perExamScore';
import { initScorePass } from './chartsInit/scorePass';
import { initScoreRadar } from './chartsInit/scoreRadar';
import { initLevelScale } from './chartsInit/levelScale';
import { APIData, IStuScoreChart, IStuScoreChartParams, IStuScore, IThemeColor } from '../../../../type/index';
import SelectHeader from './components/SelectHeader.vue';
import PerExamRank from './components/PerExamRank.vue';
import { useThemeStore } from '../../../../store/theme';
const api = useAPI();
const store = useUserStore();
const themeStore = useThemeStore();

const chartData = ref<IStuScoreChart>();
const currentOptionId = ref<string>();
const selectOptions = ref<IStuScore[]>();
const themeColor = ref<IThemeColor>(themeStore.currentThemeColor);
const isCloseMenu = ref<boolean>(themeStore.isColseMenu);
let currentStage = store.currentStage;

store.$subscribe(async (args, states) => {
  if (currentStage != states.currentStage) {
    currentStage = states.currentStage;
    const flag = await getAllStuInfo();
    disposeAllCharts(); //销毁之前的实例
    if (flag) initAllCharts(); //重新创建
  }
});

themeStore.$subscribe((args, states) => {
  if (themeColor.value.font != states.currentThemeColor.font) {
    themeColor.value = states.currentThemeColor;
    disposeAllCharts(); //销毁之前的实例
    initAllCharts(); //重新创建
  }

  if (isCloseMenu.value != states.isColseMenu) {
    isCloseMenu.value = states.isColseMenu;

    setTimeout(() => {
      disposeAllCharts(); //销毁之前的实例
      initAllCharts(); //重新创建
    }, 300);
  }
});

const onOptionClick = (item: IStuScore) => {
  currentOptionId.value = item.studentId;
  disposeAllCharts(); //销毁之前的实例
  initAllCharts(); //重新创建
};

onMounted(async () => {
  const flag = await getAllStuInfo();
  if (flag) initAllCharts();
});

const initAllCharts = async () => {
  await getChartData();
  const data = chartData.value;
  if (!data) {
    initAllCharts();
    return;
  }
  initScoreRadar(echarts, document.querySelector('#scoreRadar') as HTMLElement, data.lineYData, data.lineXData, data.aveScore, themeColor.value);
  initLevelScale(echarts, document.querySelector('#levelScale') as HTMLElement, data.pieValueData, data.pieLabelData, themeColor.value);
  initScorePass(echarts, document.querySelector('#scorePass') as HTMLElement, data.passRate, themeColor.value);
  initPerExamScore(echarts, document.querySelector('#perExamScore') as HTMLElement, data.lineYData, data.lineXData, themeColor.value);
};

const disposeAllCharts = () => {
  echarts.dispose(document.querySelector('#scoreRadar') as HTMLElement);
  echarts.dispose(document.querySelector('#levelScale') as HTMLElement);
  echarts.dispose(document.querySelector('#scorePass') as HTMLElement);
  echarts.dispose(document.querySelector('#perExamScore') as HTMLElement);
};

onBeforeUnmount(() => {
  disposeAllCharts();
});

const getAllStuInfo = async () => {
  const params = { stage: store.currentStage, workId: store.userInfo.workId };
  const res: APIData = await api.findAllByGet(params, store.role, 'stuScore');
  let flag = false;
  if (res.code === 200 && res.data.rows.length !== 0) {
    selectOptions.value = res.data.rows;
    currentOptionId.value = res.data.rows[0].studentId;
    flag = true;
  } else if (res.code === 200 && res.data.rows.length === 0) ElMessage.error('该期数暂无学生分数数据');
  else ElMessage.error(res.message);
  return flag;
};

const getChartData = async () => {
  const params: IStuScoreChartParams = { stage: store.currentStage, workId: store.userInfo.workId, studentId: currentOptionId.value as string };
  const res: APIData = await api.getChartData(params, store.role, 'stuScore');
  if (res.code === 200) chartData.value = res.data;
  else ElMessage.error(res.message);
  // console.log(chartData.value);
};
</script>

<style lang="scss" scoped>
#stuScoreCharts {
  height: 100%;
  .main-box {
    padding-top: 16px;
    height: calc(98% - 60px);
    display: flex;
    justify-content: space-between;
    // border: 2px solid red;

    main {
      width: 75%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      // border: 2px solid black;

      section {
        display: flex;
        justify-content: space-between;
        height: 48%;
        // border: 2px solid orange;

        .left-top-box {
          width: 32%;
          #scoreRadar,
          #levelScale,
          #scorePass {
            width: 100%;
            height: 100%;
          }
        }
      }

      .left-bottom-box {
        height: 50%;
        #perExamScore {
          width: 100%;
          height: 100%;
        }
        // border: 2px solid blue;
      }
    }

    aside {
      width: 23%;
      // border: 2px solid orange;
      .right-box {
        height: 100%;
        #perExamRank {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
